<template>
      <!-- 搜索表单 -->
      <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="职工名">
          <el-input v-model="formInline.name" placeholder="职工名" style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="formInline.department" placeholder="部门" style="width: 120px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="部门1" value="1"></el-option>
            <el-option label="部门2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="formInline.position" placeholder="职位" style="width: 120px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="职位1" value="1"></el-option>
            <el-option label="职位2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.enabled" placeholder="状态" style="width: 120px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="在职" value="1"></el-option>
            <el-option label="离职" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" style="width: 90px;">查询</el-button>
        </el-form-item>
        <el-button type="success" icon="el-icon-circle-plus" @click="showAddDialog" style="margin-left: 10px;">新增职工</el-button>
      </el-form>
  
      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="职工ID" width="90"></el-table-column>
        <el-table-column prop="userFace" label="头像" width="90"></el-table-column>
        <el-table-column prop="name" label="职工名" width="90"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="90"></el-table-column>
        <el-table-column prop="address" label="地址" width="180"></el-table-column>
        <el-table-column prop="username" label="账号" width="90"></el-table-column>
        <el-table-column prop="enabled" label="状态" width="90">
          <template #default="scope">
            <el-button :type="scope.row.enabled ? 'success' : 'info'">
              {{ scope.row.enabled ? '在职' : '离职' }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="部门名" width="90"></el-table-column>
        <el-table-column prop="createDate" label="职位名" width="90"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
  
      <!-- 新增/编辑对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="职工名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.enabled" placeholder="请选择状态">
              <el-option label="在职" value="1"></el-option>
              <el-option label="离职" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        formInline: {
          name: '',
          enabled: ''
        },
        tableData: [],
        pagination: {
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
        dialogVisible: false,
        dialogTitle: '新增职工',
        form: {
          name: '',
          enabled: '1'
        }
      };
    },
    methods: {
      handleSearch() {
        this.pagination.pageNum = 1;
        this.fetchData();
      },
      showAddDialog() {
        this.dialogTitle = '新增职工';
        this.form = {
          name: '',
          phone: '',
          enabled: '1'
        };
        this.dialogVisible = true;
      },
      showEditDialog(row) {
        this.dialogTitle = '编辑职工';
        this.form = {
          id: row.id,
          name: row.name,
          enabled: String(row.enabled)
        };
        this.dialogVisible = true;
      },
      handleDelete(id) {
        this.$confirm('确认删除该职工吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete(`http://localhost:8888/a/delete/${id}`).then(() => {
            this.$message.success('删除成功');
            this.fetchData();
          }).catch(() => {
            this.$message.error('删除失败');
          });
        }).catch(() => {});
      },
      handleSizeChange(pageSize) {
        this.pagination.pageSize = pageSize;
        this.fetchData();
      },
      handleCurrentChange(pageNum) {
        this.pagination.pageNum = pageNum;
        this.fetchData();
      },
      handleConfirm() {
        
        const url = this.dialogTitle === '新增职工' ? 'http://localhost:8888/admin/add' : `http://localhost:8888/admin/update`;
        axios.post(url, this.form, {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(response => {
    
      if (response.code === 200) {
        this.$message.success(response.data);
        this.dialogVisible = false;
       this.fetchData();
      } else {
        this.$message.error(response.message);
      }
      
    }).catch(() => {
      this.$message.error('操作失败');
    });
  
  
      },
      fetchData() {
        const params = {
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          name: this.formInline.name,
          enabled: this.formInline.enabled
        };
  
        axios.post('http://localhost:8888/admin/getList', params, {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(response => {
      this.tableData = response.data || [];
    }).catch(() => {
      this.$message.error('获取数据失败');
    });
  
        axios.get('http://localhost:8888/admin/count', { params }).then(response => {
          this.total = response.data;
        }).catch(() => {
          this.$message.error('获取数据失败');
        });
      }
    },
    mounted() {
      this.fetchData();
    }
  };
  </script>
  
  
  
    
    <style scoped>
    .el-pagination {
      margin-top: 20px;
      text-align: right;
    }
    </style>
    